<template>
  <m-layout>
    <mt-header slot="header" title="课时列表" >
      <m-header-back slot="left"/>
    </mt-header>
    <div slot="body">
      <m-section :border-bottom="false">
        <e-heading>课程：{{lessonArr[0] && lessonArr[0].className}}<small>课时列表 （共{{total}}课时）</small></e-heading>
        <div class="lesson" v-if="lessonArr.length">
           <!-- <mt-cell :title="item.className" :value="item.status | formatStatus" is-link v-for="(item,index) in lessonArr" :key="index" class="item"></mt-cell> -->
           <ul
            v-infinite-scroll="loadMore"
            infinite-scroll-disabled="loading"
            infinite-scroll-distance="10"
            :infinite-scroll-immediate-check="true"
           >
             <li v-for="(item,index) in lessonArr" :key="index" class="item" @click="goNext(item)">
               <span class="name">课时{{index+1}}：{{item.classScheduleName}}</span>
               <span class="status">{{item.statusDesc}} <span class="icon"><i class="iconfont">&#xe65e;</i></span></span>
             </li>
           </ul>
        </div>
        <e-placeholder text="暂无课程" v-else />
      </m-section>
    </div>
  </m-layout>
</template>

<script>
import api from 'api/reviews'
import { Toast, Loadmore } from 'mint-ui'
export default {
  components: {
    Loadmore
  },
  data () {
    return {
      classId: '',
      courseId: '',
      studentId: '',
      name: '',
      lessonArr: [],
      total: 0,
      rows: 15,
      page: 1,
      loading: false
    }
  },
  filters: {},
  methods: {
    // 下拉刷新
    loadMore () {
      if (this.lessonArr.length >= this.total) {
        this.loading = true
        return false
      }
      this.lessonSchedule()
    },
    lessonSchedule () {
      api.lessonSchedule({
        classId: this.classId,
        courseId: this.courseId,
        studentId: this.studentId,
        page: this.page,
        rows: this.rows
      }).then((res) => {
        this.lessonArr.push(...res.data.list)
        this.total = res.data.total
        this.page += 1
      }).catch(() => {})
    },
    goNext (item) {
      if (item.status === 2) {
        this.$router.push({path: '/reviews/comment', query: {commentId: item.commentId}})
      } else if (item.status === 1) {
        this.$router.push({path: '/reviews/edit', query: {commentId: item.commentId, studentScheduleId: item.id, studentId: item.studentId}})
      } else {
        let status = {
          0: '未开课',
          3: '缺勤'
        }
        let text = status[item.status] + '，无法点评'
        Toast({
          message: text,
          duration: 2000
        })
      }
    }
  },
  mounted () {
    let arg = this.$route.query
    this.classId = arg.classId
    this.courseId = arg.courseId
    this.studentId = arg.studentId
    this.lessonSchedule()
  }
}
</script>

<style lang="scss" scoped>
  .lesson{
    padding-top: 0.2rem;
    li.item{
      padding: 0.3rem 0.2rem;
      position: relative;
      &:after{
          content: " ";
          border-bottom: 1px solid $border-color-base;
          display: block;
          height:0;
          width:100%;
          position: absolute;
          left: 0;
          bottom:0;
          transform: scaleY(0.5);
        }
      .name{
        display: inline-block;
        width: 70%;
      }
      .status{
        position: absolute;
        right: 0.1rem;
        top: 0.33rem;
        color: $color-sub;
        font-size: $font-size-small;
      }
    }
  }
</style>
